.blgcomment-list>li:nth-child(n+2) {
    margin-block-start: 15px !important;
}
.custom-card {
    border: 1px solid #ced4da;
}
.customizer-action svg{
    width: 23px !important;
    color: #ffffff !important;
}
.active-mode{
    border: solid 2px #000000 !important;
}
.property-img{
    max-width: 507px;
    max-height: 286px;
}
.text-justify{
    text-align: justify;
}
.custom .media{
    padding: 10px !important;
}
.user-avatar{
    width: 30px;
    height: 30px;
}
@media only screen and (max-width: 410px) {
    .header_li {
        display: none !important;
    }
}
.blgcomment-list li .media img{
    width: auto;
    height: 40px !important;
}

#card-element {
    border: 1px solid #e5e5e5 !important;
    border-radius: 5px !important;
    padding: 13px !important;
}
.codex-sidebar .logo-gridwrap{
    padding: 0px 16px !important;
}

.setting-logo{
    width:300px !important;;
}

.landing-logo{
    max-width: 225px;

}
.auth-main .auth-wrapper.v2 .logo{
    max-width: 300px;

}
.b-brand .logo{
    max-width: 212px !important;

}
.lan-footer .codex-brand{
    margin-block-end: 0px !important;
}
.email-sidebar ul.custom-sidebarmenu-list {
    margin-block-start: 0px;
}
.invoice-logo{
    width: 250px;
}

.codex-calendar .events-list li{
    font-size: 13px;
    font-weight: 500;
    padding: 10px 10px;
    border-radius: 5px;
    color: #fff;
    line-height: 1;
}
.codex-calendar .events-list{
    overflow: auto;
    height: 863px;
}
.landing_logo{
    filter: drop-shadow(2px 3px 7px #011C4B);
}
.head-invoice img{
    width: 250px;
}
.cdx-invoice .body-invoice .table tr td{
    padding: 10px 10px !important;
}


.codex-brand img{
    width: 300px;
}
.codex-authbox .auth-header .codex-brand {
    margin-block-end: 0px;
}


.intro {
    background-repeat: no-repeat;
    background-size: cover;
}

.landing_dash {
    position: absolute;
    right: 0px;
    top: 50%;
    left: auto;
    bottom: 0;
    transform: translateY(-50%);
    overflow: hidden;
    height: 585px;
    display: flex;
    align-items: center;
    width: 60%;
}

.landing_dash img {
    object-fit: cover;
    position: relative;
    right: -220px;
    border-radius: 10px;
    left: auto;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1440px) {
    .landing_dash {
        display: none;
    }
}

.lan-footer {
    text-align: center;
    background-color: unset;
}
.lan-footer .support-contain p {
    color: #051722;
    font-size: calc(16px + 4*(100vw - 420px) / 1500);
}
.select2-container .select2-selection--single {
    height: 43px !important;
    border-color: #e5e5e5;
}
.select2-container .select2-selection--multiple{
    min-height: 43px !important;
}
.select2-container--default .select2-selection--multiple{
    border: 1px solid #e5e5e5;
}

/* =========================================================================== */
.dt-length{
    padding-left: 7px !important;
}
.dt-search{
    padding-right: 7px !important;
}
.dt-info{
    padding-left: 7px !important;
}
.dt-paging{
    padding-right: 7px !important;
}
.dt-buttons{
    padding-left: 7px !important;
    float: left;
}
.dt-container{
    margin-top: 10px;
}
.dt-info{
    float: left;
}
.dt-paging{
    float: right;
    padding-top: .85em;
}
.form-group{
    margin-bottom: 15px;
}
div:where(.swal2-container) h2:where(.swal2-title){
    font-size: 1.2em !important;
}
div:where(.swal2-container) .swal2-html-container{
    font-size: 0.9em !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
    font-size: 0.8em !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm{
    font-size: 0.8em !important;
}
div:where(.swal2-icon){
    width: 4em !important;
    height: 4em !important;
}
.account-tabs .nav-item .nav-link {
    position: relative;
    padding: 0.7rem 1rem;
    font-weight: 500;
    color: var(--primary);
    display: flex;
    align-items: center;
}
.testaments-cards::after {
    background: transparent !important;
}
.pricingpricing .price-card .product-list li::before {
    content : '\eb55';
    color: red;
}
.pricingpricing .price-card .product-list li.enable::before {
    content: "\ea5e";
    color: #00c853;
}
.pricingpricing .price-card .product-list li {
    opacity: 1 !important;
}

.account-tabs .nav-item .nav-link.active
{
    color: var(--bs-secondary-rgb);
    background: rgba(var(--bs-secondary-rgb), 0.1);
}
form label{
    text-transform: capitalize;
}

@media print {
    .table-responsive {
    overflow: visible !important;
    height: auto !important;
    display: block !important;
    }
}
.color_type {
    position: relative;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
    margin-right: 10px;
    margin-top: 10px;
    width: 48px;
    height: 48px;
    flex: none;
    cursor: pointer;
}

.cutom_colorr.active::after,
.cutom_colorr.custom::after {
    content: "✓";
    color: #fff;
    font-size: 30px;
    background: none !important;
    font-weight: 900;
    background-color: transparent !important;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    line-height: 0;
}

.choose-slider .swiper-slide.swiper-slide-active h2 {
    color: rgba(var(--bs-secondary-rgb), 1);
}

.modal-body .select2-container {
    z-index: 1024;
    width: 100% !important;
}

.modal-body .select2-container {
    z-index: 1024;
    width: 100% !important;
}

.modal-backdrop ~ .select2-container {
    width: 100% !important;
    z-index: 10000 !important;
  }

.select2-container--default .select2-selection--single .select2-selection__arrow {
    line-height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

/* .select2-container,
.modal-body .select2-container {
    z-index: 1024;
    width: 100% !important;
} */

.daterangepicker td.active, .daterangepicker td.active:hover,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: rgba(var(--bs-secondary-rgb), 1);
}

/* ============================================================
   DESIGN SYSTEM — Couleur primaire #1294a4
   ============================================================ */

/* --- Variables de la palette principale --- */
:root {
    --brand-primary:        #1294a4;
    --brand-primary-dark:   #0d7888;
    --brand-primary-darker: #0a5f6e;
    --brand-primary-light:  #17afc2;
    --brand-primary-ultra:  #e8f7f9;
    --brand-primary-rgb:    18, 148, 164;
    --brand-accent:         #f0a500;    /* or chaleureux pour contraste */
    --brand-success:        #1ac97a;
    --brand-danger:         #f44336;
    --brand-text-on-primary: #ffffff;

    /* Override Bootstrap/thème */
    --bs-primary:           #1294a4;
    --bs-primary-rgb:       18, 148, 164;
    --pc-sidebar-active-color: #1294a4;
}

/* --- Couleur primaire Bootstrap --- */
.btn-primary,
.bg-primary,
.badge.bg-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.35) !important;
}

.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

.text-primary { color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.link-primary { color: var(--brand-primary) !important; }

/* Focus ring */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.18) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.18) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* --- Sidebar : gradient + accents couleur --- */
.pc-sidebar {
    background: linear-gradient(180deg, #0f2027 0%, #0d3a3f 40%, #0d5c6b 100%) !important;
    --pc-sidebar-background: #0f2027;
    --pc-sidebar-color: rgba(255,255,255,0.82);
    --pc-sidebar-caption-color: rgba(255,255,255,0.45);
    box-shadow: 4px 0 18px rgba(0,0,0,0.18) !important;
}

.pc-sidebar .navbar-content {
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.pc-sidebar .pc-caption label {
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
}

.pc-sidebar .pc-navbar > li > a,
.pc-sidebar .pc-item > a.pc-link {
    color: rgba(255,255,255,0.78) !important;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.18s, color 0.18s, transform 0.15s;
}

.pc-sidebar .pc-item > a.pc-link:hover {
    background: rgba(255,255,255,0.09) !important;
    color: #fff !important;
}

.pc-sidebar .pc-item.active > a.pc-link,
.pc-sidebar .pc-item > a.pc-link.active {
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.4);
    font-weight: 600;
}

.pc-sidebar .pc-item.active > a.pc-link .pc-micon,
.pc-sidebar .pc-item > a.pc-link.active .pc-micon {
    color: #fff !important;
}

/* Logo sidebar */
.pc-sidebar .m-header {
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* --- Header : propre et légèrement ombré --- */
.pc-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Bouton hamburger header */
.pc-head-link.head-link-secondary {
    background: var(--brand-ultra, #e8f7f9) !important;
    color: var(--brand-primary) !important;
    border-radius: 10px !important;
    transition: background 0.18s, transform 0.15s;
}

.pc-head-link.head-link-secondary:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
    transform: scale(1.05);
}

/* --- Cards : ombres douces et hover subtil --- */
.card {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04) !important;
    transition: box-shadow 0.22s, transform 0.18s;
}

.card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05) !important;
}

.card-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 1rem 1.25rem !important;
}

.card-header h5,
.card-header .card-title {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

/* --- Stat cards (Dashboard) : accent de couleur en haut --- */
.card.widget-stat-card,
.card[class*="bg-light-"],
.card .avtar {
    transition: transform 0.18s;
}

/* Ligne de couleur en haut des cards principales */
.card.border-top-primary { border-top: 3px solid var(--brand-primary) !important; }

/* --- Page header / Breadcrumb --- */
.page-header {
    background: linear-gradient(135deg, var(--brand-primary-ultra) 0%, #ffffff 100%) !important;
    border-radius: 12px !important;
    margin-bottom: 1.25rem !important;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.12) !important;
    box-shadow: none !important;
}

.page-header .page-title {
    color: var(--brand-primary-darker);
    font-weight: 700;
    font-size: 1.1rem;
}

.breadcrumb-item a {
    color: var(--brand-primary) !important;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-item.active {
    color: #6c757d;
}

/* --- Boutons globaux : plus de relief et rayon --- */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    transition: all 0.2s ease !important;
}

.btn:not(.btn-link):not(.btn-icon):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.btn-sm {
    border-radius: 6px !important;
    font-size: 0.8rem !important;
}

.btn-danger {
    background-color: #f44336 !important;
    border-color: #f44336 !important;
}

.btn-success {
    background-color: #00c853 !important;
    border-color: #00c853 !important;
}

.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
}

/* --- Inputs et formulaires --- */
.form-control,
.form-select {
    border-radius: 8px !important;
    border: 1px solid #dde1e7 !important;
    background-color: #fafbfc !important;
    color: #1a1a2e;
    font-size: 0.875rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.form-control::placeholder {
    color: #adb5bd;
    font-size: 0.85rem;
}

.form-label {
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: #495057 !important;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    margin-bottom: 0.35rem !important;
}

/* --- Tableaux DataTable --- */
.dataTable thead th,
.display thead th {
    background: linear-gradient(135deg, var(--brand-primary-ultra) 0%, #f0fafb 100%) !important;
    color: var(--brand-primary-darker) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(var(--brand-primary-rgb), 0.2) !important;
    padding: 12px 14px !important;
}

.dataTable tbody tr:hover td,
.display tbody tr:hover td {
    background-color: var(--brand-primary-ultra) !important;
}

.dataTable tbody tr td,
.display tbody tr td {
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 11px 14px !important;
    vertical-align: middle;
    font-size: 0.875rem;
}

/* --- Badges --- */
.badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    padding: 0.32em 0.65em !important;
    letter-spacing: 0.02em;
}

/* --- Avtar / icônes d'action dans les tables --- */
.avtar {
    border-radius: 8px !important;
    transition: transform 0.15s, box-shadow 0.15s;
}

.avtar:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* --- Onglets (nav-tabs) --- */
.nav-tabs .nav-link {
    border-radius: 8px 8px 0 0 !important;
    color: #6c757d;
    font-weight: 500;
    transition: color 0.18s, background 0.18s;
}

.nav-tabs .nav-link.active {
    color: var(--brand-primary) !important;
    border-bottom-color: var(--brand-primary) !important;
    font-weight: 700;
}

.nav-tabs .nav-link:hover:not(.active) {
    color: var(--brand-primary);
    background: var(--brand-primary-ultra);
}

/* --- Pagination --- */
.page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 3px 8px rgba(var(--brand-primary-rgb), 0.35);
}

.page-item.active .page-link,
.dt-paging .pagination .page-item.active .page-link,
button.dt-paging-button.current,
button.dt-paging-button.current:hover,
button.dt-paging-button.current:focus {
    color: #ffffff !important;
}

.page-link {
    color: var(--brand-primary) !important;
    border-radius: 6px !important;
    margin: 0 2px;
    transition: all 0.18s;
}

.page-link:hover {
    background-color: var(--brand-primary-ultra) !important;
    border-color: rgba(var(--brand-primary-rgb), 0.3) !important;
}

/* --- Checkboxes et switches --- */
.form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* --- Progress bars --- */
.progress-bar {
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%) !important;
}

/* --- Alerts --- */
.alert-primary {
    background-color: var(--brand-primary-ultra) !important;
    border-color: rgba(var(--brand-primary-rgb), 0.3) !important;
    color: var(--brand-primary-darker) !important;
}

/* --- Scrollbar personnalisée (webkit) --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-primary-rgb), 0.35);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

/* --- SweetAlert2 : bouton confirm couleur primaire --- */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: var(--brand-primary) !important;
    border: none !important;
}

/* --- Modal : header avec accent --- */
.modal-header {
    background: linear-gradient(135deg, var(--brand-primary-ultra) 0%, #ffffff 100%);
    border-bottom: 2px solid rgba(var(--brand-primary-rgb), 0.15) !important;
    border-radius: 12px 12px 0 0 !important;
}

.modal-title {
    color: var(--brand-primary-darker);
    font-weight: 700;
    font-size: 1rem;
}

.modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}

/* --- Toastr / Notifier --- */
.notifier-container .notifier {
    border-radius: 10px !important;
    border-left: 4px solid var(--brand-primary) !important;
}

/* --- Avatar utilisateur header --- */
.user-avtar {
    border: 2px solid rgba(var(--brand-primary-rgb), 0.3);
    border-radius: 50% !important;
    transition: border-color 0.18s;
}

.header-user-profile:hover .user-avtar {
    border-color: var(--brand-primary);
}

/* --- Body background légèrement coloré --- */
body {
    background-color: #f4f6f8 !important;
}

/* --- Footer admin : bordure top subtile --- */
.pc-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* Responsive hardening for admin + landing views (mobile/webview) */
:root {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

.table-responsive1 {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive1 .table,
.table-responsive .table {
    min-width: 640px;
}

.pc-content,
.auth-main,
.landing-page {
    padding-bottom: calc(0px + var(--mobile-safe-bottom));
}

@media (max-width: 991.98px) {
    .pc-header {
        padding-top: var(--mobile-safe-top);
        padding-left: var(--mobile-safe-left);
        padding-right: var(--mobile-safe-right);
        /* Centrage vertical des éléments du header sur mobile */
        min-height: 60px;
        align-items: center;
    }

    .pc-header .header-wrapper {
        align-items: center;
        min-height: 60px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .pc-header .pc-mob-drp {
        display: flex;
        align-items: center;
        padding-top: 10px;
    }

    .pc-header .pc-h-item {
        display: flex;
        align-items: center;
    }

    .pc-container .pc-content {
        padding: 14px 12px;
    }

    .page-header .page-block .row {
        row-gap: 8px;
    }

    .page-header .col-auto {
        width: 100%;
    }

    .page-header .breadcrumb {
        margin-top: 0;
        margin-bottom: 0;
        flex-wrap: wrap;
    }

    .card {
        margin-bottom: 12px;
    }

    .card-body {
        padding: 0.9rem;
    }

    .pc-footer .footer-wrapper .row {
        row-gap: 8px;
    }

    .pc-footer .footer-link {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .table-responsive,
    .dt-responsive {
        margin-bottom: 8px;
        border-radius: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .dt-container .dt-layout-row {
        display: flex;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .dt-length,
    .dt-search,
    .dt-buttons,
    .dt-info,
    .dt-paging {
        float: none !important;
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dt-buttons .btn,
    .dt-paging .pagination {
        flex-wrap: wrap;
        gap: 6px;
    }

    .modal-dialog {
        margin: 0.6rem;
    }

    .select2-container {
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    .pc-header .header-wrapper,
    .pc-sidebar .navbar-content,
    .pc-content,
    .auth-form,
    .auth-main .auth-wrapper,
    .landing-page .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .auth-main .auth-wrapper.v2 .auth-form,
    .auth-main .auth-wrapper.v3 .auth-form {
        width: 100%;
        max-width: 100%;
    }

    .auth-main .auth-wrapper.v2 .logo,
    .auth-main .auth-wrapper.v3 .logo {
        text-align: center;
    }

    .auth-main .auth-wrapper.v2 .logo .brand-logo,
    .auth-main .auth-wrapper.v3 .logo .brand-logo {
        max-width: 220px;
        width: 100%;
    }

    .landing-page .navbar .navbar-collapse {
        background: var(--bs-body-bg);
        padding: 12px;
        margin-top: 8px;
        border-radius: 10px;
    }

    .landing-page header .row {
        row-gap: 20px;
    }

    .landing-page section .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .landing-page section .d-flex.gap-2 .form-control,
    .landing-page section .d-flex.gap-2 .btn {
        width: 100%;
    }

    .fr-status .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
    }

    .fr-status .card-header .ms-auto {
        width: 100%;
        justify-content: flex-start !important;
    }

    .fr-status .table th,
    .fr-status .table td {
        white-space: nowrap;
    }

    .btn,
    .form-control,
    .form-select,
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple {
        min-height: 42px;
    }

    .row>[class*="col-"] {
        margin-bottom: 10px;
    }
}

/* ============================================================
   PASSE 2 – Correctifs ciblés page par page
   ============================================================ */

/* ---- Courier Create / Edit : grille items ligne unique ---- */
@media (max-width: 767.98px) {
    .row.item_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .row.item_list .form-group.col-sm-3,
    .row.item_list .form-group.col {
        min-width: 0;
    }

    /* La zone note prend toute la largeur */
    .row.item_list .form-group:last-of-type {
        grid-column: 1 / -1;
    }

    /* Bouton supprimer centré */
    .row.item_list .col-auto {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        grid-column: 1 / -1;
    }
}

/* ---- Courier Show : col-4 rigides ---- */
@media (max-width: 575.98px) {
    #invoice-print .card-body .row .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-bottom: 6px;
    }

    #invoice-print .card-header .row .col-sm-6,
    #invoice-print .card-body .row .col-md-6,
    #invoice-print .card-body .row .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #invoice-print .col-sm-6.text-sm-end {
        text-align: left !important;
    }
}

/* ---- Courier Index : barre de filtres ---- */
@media (max-width: 767.98px) {
    .card-header .d-flex.flex-wrap.gap-2 {
        flex-direction: column;
        align-items: stretch;
    }

    .card-header .d-flex.flex-wrap.gap-2 > div,
    .card-header .d-flex.flex-wrap.gap-2 > a,
    .card-header .d-flex.flex-wrap.gap-2 > button {
        width: 100%;
    }

    .card-header .d-flex.flex-wrap.gap-2 .form-control,
    .card-header .d-flex.flex-wrap.gap-2 .select2-container {
        width: 100% !important;
    }

    .card-header .col-12.col-md-auto {
        width: 100%;
    }
}

/* ---- Invoice Show : actions header + table items ---- */
@media (max-width: 767.98px) {
    .d-print-none.card .list-inline {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 10px;
    }

    .card-body .row.g-3 .col-sm-6.text-sm-end {
        text-align: left !important;
    }

    .card-body .col-sm-6,
    .card-body .col-sm-4 {
        width: 100%;
    }
}

/* ---- Settings : tabs verticaux en colonne sur mobile ---- */
@media (max-width: 991.98px) {
    .account-tabs.nav.flex-column {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .account-tabs .nav-item {
        flex: 0 0 auto;
    }

    .account-tabs .nav-item .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .account-tabs .nav-item .nav-link small {
        display: none;
    }

    /* Le volet de contenu d'onglets prend toute la largeur */
    .col-lg-4.col-sm-12 .account-tabs ~ .tab-content,
    .col-sm-12 .tab-content {
        width: 100%;
    }

    /* La grille settings col-lg-4 / col-lg-8 */
    .settings-card-row .col-lg-4,
    .col-lg-4:has(.account-tabs) {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- Modals : taille plein écran sur mobile ---- */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-sm):not(.modal-xl) {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    .modal-dialog .modal-content {
        border-radius: 0;
        min-height: 100dvh;
    }

    .modal-dialog.modal-dialog-centered {
        min-height: 100dvh;
        margin: 0;
    }
}

/* ---- Wallet / Abonnement : tableaux et cartes ---- */
@media (max-width: 767.98px) {
    .wallet-balance,
    .subscription-card {
        text-align: center;
    }
}

/* ---- Rapport : filtres date range ---- */
@media (max-width: 767.98px) {
    .report-filters .row {
        row-gap: 12px;
    }

    .report-filters [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* ---- Card header actions : boutons + titres côte à côte ---- */
@media (max-width: 575.98px) {
    .card-header .row.align-items-center.g-2 {
        row-gap: 8px;
    }

    .card-header .row.align-items-center.g-2 .col-auto {
        width: 100%;
    }

    .card-header .row.align-items-center.g-2 .col-auto .btn,
    .card-header .row.align-items-center.g-2 .col-auto a.btn {
        width: 100%;
        text-align: center;
    }
}

/* ---- User show : grille détails ---- */
@media (max-width: 575.98px) {
    .col-xxl-3.col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- Calendrier : overflow ---- */
@media (max-width: 767.98px) {
    .codex-calendar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .codex-calendar .events-list {
        height: auto;
        max-height: 300px;
    }
}

/* ---- Formulaires create/edit : col-md-4 → pleine largeur sur xs ---- */
@media (max-width: 575.98px) {
    .form-group.col-md-4,
    .form-group.col-md-6,
    .form-group.col-md-8,
    .form-group.col-lg-4,
    .form-group.col-lg-6,
    .form-group.col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- Boutons submit en bas de formulaire ---- */
@media (max-width: 575.98px) {
    .col-xl-12.col-md-12.form-group.text-end {
        text-align: left !important;
    }

    .col-xl-12.col-md-12.form-group.text-end .btn {
        width: 100%;
    }
}

/* ---- Cart-action (boutons icon dans les tables) ---- */
@media (max-width: 767.98px) {
    .cart-action {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
    }

    td .cart-action {
        min-width: 80px;
    }
}

/* ---- Landing page section tracking search ---- */
@media (max-width: 575.98px) {
    .card.border-0.shadow-sm.p-4 {
        padding: 1rem !important;
        max-width: 100% !important;
    }
}

/* ---- Tracking status page ---- */
@media (max-width: 767.98px) {
    .order-timeline .col-2.col-md-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .order-timeline .col-10.col-md-3 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .auth-wrapper.v3 .auth-form {
        width: 100%;
        max-width: 100%;
        padding: 0 8px;
    }

    .fr-status .card-body {
        padding: 0.75rem;
    }

    .fr-status .row.mb-4.align-items-center.justify-content-between .col-sm-4 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: left !important;
    }

    .fr-status .card-body .cdx-invoice.text-end {
        text-align: left !important;
    }

    .fr-status .row.mb-6 .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 16px;
    }
}

/* ---- Auth pages (login/register/forgot) ---- */
@media (max-width: 575.98px) {
    .auth-main .auth-wrapper.v2 {
        padding: 12px;
    }

    .auth-main .auth-wrapper.v2 .auth-sidecontent {
        display: none !important;
    }

    .auth-main .auth-wrapper.v2 .auth-form {
        width: 100%;
    }

    .auth-form .card {
        border-radius: 12px;
    }
}

/* ---- Page CMS (page.blade.php) ---- */
@media (max-width: 767.98px) {
    .front-header-image .privacy-details {
        padding: 16px 12px !important;
    }

    .front-header-image .privacy-details h1 {
        font-size: 1.8rem !important;
    }

    .front-header-image .container {
        padding-top: 0 !important;
    }

    .front-header-image .row.justify-content-center.mt-5 {
        margin-top: 1rem !important;
    }
}

/* ---- Invoice show : grille sender/receiver ---- */
@media (max-width: 575.98px) {
    .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Exclure les layouts internes spécifiques qui doivent rester côte à côte */
    .auth-wrapper.v2 > .auth-form,
    .auth-wrapper.v2 > .auth-sidecontent {
        flex: unset;
        max-width: unset;
    }
}

/* ---- Print : masquer éléments inutiles, éviter overflow ---- */
@media print {
    .dt-buttons,
    .pc-header,
    .pc-sidebar,
    .pc-footer,
    .d-print-none {
        display: none !important;
    }

    .pc-content,
    .pc-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    body {
        background: #fff !important;
    }
}

/* ============================================================
   PASSE 3 – Checklist finale (320px → 1024px)
   ============================================================ */

/* --- Logos : jamais plus larges que leur conteneur --- */
.setting-logo,
.invoice-logo,
.head-invoice img,
.b-brand .logo,
.landing-logo,
.auth-main .auth-wrapper .logo img,
.brand-logo {
    max-width: 100%;
    height: auto;
}

/* Sur mobile, limiter les logos à des tailles raisonnables */
@media (max-width: 575.98px) {
    .setting-logo { width: 100% !important; max-width: 200px !important; }
    .invoice-logo { width: auto !important; max-width: 160px !important; }
    .head-invoice img { width: auto !important; max-width: 160px !important; }
}

/* --- Landing : tracking search buttons stackés proprement --- */
@media (max-width: 575.98px) {
    .landing-page section .card .d-flex.gap-2 {
        flex-direction: column !important;
    }

    .landing-page section .card .d-flex.gap-2 .form-control,
    .landing-page section .card .d-flex.gap-2 .btn {
        width: 100% !important;
        text-wrap: wrap !important;
    }

    .landing-page section .card .d-flex.gap-2 .btn {
        justify-content: center;
    }
}

/* --- 320px extrême : texte et paddings réduits --- */
@media (max-width: 359.98px) {
    body {
        font-size: 0.8rem;
    }

    .card-body {
        padding: 0.65rem;
    }

    .btn {
        font-size: 0.78rem;
        padding: 0.35rem 0.65rem;
    }

    .pc-container .pc-content {
        padding: 10px 8px;
    }

    .page-header .page-block {
        padding: 8px !important;
    }

    h4, .h4 { font-size: 0.9rem; }
    h5, .h5 { font-size: 0.82rem; }
}

/* --- Sidebar admin : seul pc-sidebar-popup reste visible sur mobile ---
   Le thème masque déjà header-mobile-collapse à ≤1024px ; on respecte cette règle. */
@media (max-width: 1024px) {
    /* Garantit que le second bouton (popup sidebar) est bien cliquable en webview */
    .pc-header .pc-h-item.pc-sidebar-popup {
        display: list-item !important;
    }
}

/* --- Tableau de bord : cartes statistiques en 2 colonnes sur 360px --- */
@media (min-width: 360px) and (max-width: 575.98px) {
    .row .col-lg-3.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* --- Auth page v3 (tracking search) : centrage et max-width --- */
@media (max-width: 575.98px) {
    .auth-main .auth-wrapper.v3 {
        padding: 16px 8px;
        min-height: 100dvh;
        align-items: flex-start;
    }

    .auth-main .auth-wrapper.v3 .auth-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .auth-main .auth-wrapper.v3 .card {
        margin: 1rem 0 !important;
    }
}

/* --- Admin header : safe-area top webview iOS/Android --- */
.pc-header {
    padding-top: max(0px, var(--mobile-safe-top));
    padding-left: max(0px, var(--mobile-safe-left));
    padding-right: max(0px, var(--mobile-safe-right));
}

/* --- Select2 dans les filtres de card-header : pas de truncation --- */
@media (max-width: 767.98px) {
    .card-header form .select2-container--default .select2-selection__rendered {
        white-space: normal;
        word-break: break-word;
    }
}

/* --- Page landing : hero image cachée sur très petits écrans --- */
@media (max-width: 575.98px) {
    .landing-page header .hero-image {
        display: none;
    }

    .landing-page header .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Limiter la hauteur du header landing sur mobile */
    .landing-page header {
        padding-top: 80px;
        padding-bottom: 24px;
    }
}

/* --- Navigation landing : sticky + fond solide sur mobile --- */
@media (max-width: 767.98px) {
    .landing-page .navbar.fixed-top,
    .landing-page .navbar.default {
        position: sticky !important;
        top: 0;
        z-index: 1030;
        background: var(--bs-body-bg) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .landing-page .navbar .navbar-toggler {
        padding: 6px 10px;
    }
}

/* --- Tableaux dans les rapports : largeur minimum raisonnable --- */
@media (max-width: 767.98px) {
    .advance-datatable th,
    .advance-datatable td {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 6px 8px;
    }
}

/* --- Coupon history + wallet transactions : actions lisibles --- */
@media (max-width: 575.98px) {
    td a.avtar.avtar-xs {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
    }
}

/* --- Formulaires de connexion : input et boutons touchables (> 44px) --- */
.auth-form input.form-control,
.auth-form .btn {
    min-height: 46px;
}

/* --- Footer admin : toujours au-dessus du safe area bas --- */
.pc-footer {
    padding-bottom: max(8px, var(--mobile-safe-bottom));
}

/* ============================================================
   Android WebView — file input polyfill
   ============================================================ */
.android-file-wrapper {
    width: 100%;
}

.android-file-btn {
    /* Zone de clic généreuse pour les doigts */
    min-height: 40px;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.android-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   Dashboard mobile polish
   ============================================================ */

/* KPI cards: better spacing and resilient text wrapping */
.dashboard-page > .col-lg-3.col-md-6 .card .card-body {
    padding: 1rem;
}

.dashboard-page > .col-lg-3.col-md-6 .card .d-flex.align-items-center {
    align-items: flex-start !important;
    gap: 10px;
}

.dashboard-page > .col-lg-3.col-md-6 .card .flex-grow-1 {
    min-width: 0;
}

.dashboard-page > .col-lg-3.col-md-6 .card p.mb-1 {
    margin-bottom: 0.25rem !important;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: 0.9rem;
}

.dashboard-page > .col-lg-3.col-md-6 .card h4.mb-0 {
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 1.2rem;
}

/* Chart card title block spacing */
.dashboard-page > .col-lg-12.col-md-12 .card .card-body {
    padding: 1rem 1rem 0.75rem;
}

/* 360-575px: keep two cards per row, but make content readable */
@media (min-width: 360px) and (max-width: 575.98px) {
    .dashboard-page > .col-lg-3.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .dashboard-page > .col-lg-3.col-md-6 .card {
        min-height: 122px;
    }

    .dashboard-page > .col-lg-3.col-md-6 .card p.mb-1 {
        font-size: 0.86rem;
    }

    .dashboard-page > .col-lg-3.col-md-6 .card h4.mb-0 {
        font-size: 1.1rem;
    }
}

/* <=359px: one card per row to prevent cramped/cut labels */
@media (max-width: 359.98px) {
    .dashboard-page > .col-lg-3.col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dashboard-page > .col-lg-3.col-md-6 .card {
        min-height: 108px;
    }
}

/* <=430px: force one per row when labels are long (customer dashboard case) */
@media (max-width: 430px) {
    .dashboard-page > .col-lg-3.col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dashboard-page > .col-lg-3.col-md-6 .card {
        min-height: 106px;
    }
}

/* ============================================================
   Dashboard premium look (same brand color)
   ============================================================ */

.dashboard-page > .col-lg-3.col-md-6 .card {
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfc 100%);
}

.dashboard-page > .col-lg-3.col-md-6 .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #1294a4 0%, #17afc2 100%);
}

.dashboard-page > .col-lg-3.col-md-6 .card::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18, 148, 164, 0.18) 0%, rgba(18, 148, 164, 0) 70%);
    pointer-events: none;
}

.dashboard-page > .col-lg-3.col-md-6 .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(9, 40, 45, 0.16), 0 0 0 1px rgba(18, 148, 164, 0.12) !important;
}

.dashboard-page > .col-lg-3.col-md-6 .card .avtar {
    width: 44px;
    height: 44px;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 14px rgba(18, 148, 164, 0.18);
}

.dashboard-page > .col-lg-3.col-md-6 .card .avtar i {
    font-size: 1.15rem;
}

/* Harmonisation palette icones KPI */
.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-secondary,
.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-primary,
.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-info {
    background: rgba(18, 148, 164, 0.14) !important;
}

.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-secondary i,
.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-primary i,
.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-info i {
    color: #1294a4 !important;
}

.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-warning {
    background: rgba(240, 165, 0, 0.16) !important;
}

.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-warning i {
    color: #b27a00 !important;
}

.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-danger {
    background: rgba(244, 67, 54, 0.14) !important;
}

.dashboard-page > .col-lg-3.col-md-6 .card .avtar.bg-light-danger i {
    color: #c3362c !important;
}

.dashboard-page > .col-lg-3.col-md-6 .card p.mb-1 {
    color: #42515d;
    font-weight: 600;
}

.dashboard-page > .col-lg-3.col-md-6 .card h4.mb-0 {
    color: #0a2f35;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Carte rapport avec look plus premium */
.dashboard-page > .col-lg-12.col-md-12 .card {
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfc 100%);
}

.dashboard-page > .col-lg-12.col-md-12 .card h5 {
    color: #0a2f35;
    font-weight: 700;
}

.dashboard-page > .col-lg-12.col-md-12 .card .text-muted {
    color: #5d6e7b !important;
}

/* Animation discrète d'apparition */
@keyframes kpiFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-page > .col-lg-3.col-md-6 .card {
    animation: kpiFadeUp 0.38s ease both;
}

.dashboard-page > .col-lg-3.col-md-6:nth-child(1) .card { animation-delay: 0.02s; }
.dashboard-page > .col-lg-3.col-md-6:nth-child(2) .card { animation-delay: 0.06s; }
.dashboard-page > .col-lg-3.col-md-6:nth-child(3) .card { animation-delay: 0.10s; }
.dashboard-page > .col-lg-3.col-md-6:nth-child(4) .card { animation-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
    .dashboard-page > .col-lg-3.col-md-6 .card {
        animation: none;
    }

    .dashboard-page > .col-lg-3.col-md-6 .card:hover {
        transform: none;
    }
}

/* ============================================================
   List pages premium polish (titles, filters, datatable actions)
   ============================================================ */

/* Generic DataTables polish (all list pages using DataTables) */
.dt-container .dt-layout-row {
    align-items: center;
    row-gap: 10px;
}

.dt-container .dt-search label,
.dt-container .dt-length label {
    color: #37525b;
    font-weight: 600;
    font-size: 0.83rem;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    border-radius: 10px !important;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.2) !important;
    background: #ffffff !important;
    min-height: 38px;
    font-size: 0.84rem;
}

.dt-container .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0 !important;
}

.dt-container .dt-buttons .btn {
    border-radius: 10px !important;
    padding: 0.42rem 0.82rem;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border: none !important;
    background: linear-gradient(90deg, var(--brand-primary) 0%, #17afc2 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(var(--brand-primary-rgb), 0.25);
}

.dt-container .dt-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(var(--brand-primary-rgb), 0.35);
}

/* Courier list and other scoped list pages */
.list-page .card {
    border-radius: 16px !important;
}

.list-page .card-header {
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.08) 0%, #ffffff 60%) !important;
    border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.12) !important;
    padding: 1rem 1.1rem !important;
}

.list-page .card-header h5 {
    color: #0f3b43 !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    margin-bottom: 0;
}

.list-page .card-header .form-label {
    color: #3d5861 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.32rem !important;
}

.list-page .card-header .form-control,
.list-page .card-header .select2-container--default .select2-selection--single,
.list-page .card-header .select2-container--default .select2-selection--multiple {
    background: #ffffff !important;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.22) !important;
    border-radius: 10px !important;
    min-height: 40px;
}

.list-page .card-header .btn {
    border-radius: 10px !important;
    min-height: 40px;
    min-width: 40px;
    font-weight: 700 !important;
    border: none !important;
    background: linear-gradient(90deg, var(--brand-primary) 0%, #17afc2 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 16px rgba(var(--brand-primary-rgb), 0.22);
}

.list-page .card-header .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(var(--brand-primary-rgb), 0.32);
}

.list-page .card-header .btn i {
    font-size: 1rem;
}

.list-page .card-header .btn + .btn,
.list-page .card-header .d-flex.gap-2 .btn {
    margin-left: 0;
}

/* Table header typography and subtitle tone */
.list-page .advance-datatable thead th {
    color: #0f3b43 !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.list-page .advance-datatable tbody td {
    color: #2a3d45;
    font-size: 0.87rem;
}

/* Mobile layout for filters + buttons above table */
@media (max-width: 767.98px) {
    .list-page .card-header .row.align-items-center.g-2.flex-wrap {
        row-gap: 10px;
    }

    .list-page .card-header form .d-flex.flex-wrap.gap-2 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100%;
    }

    .list-page .card-header form .d-flex.flex-wrap.gap-2 > div {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .list-page .card-header form .btn {
        width: 100%;
        justify-content: center;
    }

    /* Wrapper des boutons d'action sur une seule ligne */
    .list-page .card-header form .list-filter-actions-row {
        flex-wrap: nowrap !important;
        align-items: stretch;
        width: 100%;
    }

    .list-page .card-header form .list-filter-action-search,
    .list-page .card-header form .list-filter-action-reset {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    .list-page .card-header form .list-filter-action-create {
        flex: 2 1 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    .list-page .card-header form .list-filter-action-search .btn,
    .list-page .card-header form .list-filter-action-reset .btn,
    .list-page .card-header form .list-filter-action-create .btn {
        min-width: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.76rem !important;
        white-space: nowrap;
    }

    .list-page .card-header form .btn i {
        margin-right: 4px;
    }

    .list-page .dt-container .dt-buttons {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .list-page .dt-container .dt-buttons .btn {
        width: 100%;
        text-align: center;
        padding: 0.42rem 0.35rem;
        font-size: 0.72rem !important;
        white-space: nowrap;
    }

    .list-page .dt-container .dt-search,
    .list-page .dt-container .dt-length {
        width: 100%;
    }

    .list-page .dt-container .dt-search input,
    .list-page .dt-container .dt-length select {
        width: 100% !important;
    }
}

@media (max-width: 430px) {
    .list-page .dt-container .dt-buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .list-page .dt-container .dt-buttons .btn {
        min-width: 68px;
        font-size: 0.68rem !important;
    }
}

/* ============================================================
   Footer premium polish
   ============================================================ */

/* Admin footer */
.pc-footer {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%) !important;
    border-top: 1px solid rgba(var(--brand-primary-rgb), 0.15) !important;
    box-shadow: 0 -4px 14px rgba(8, 36, 41, 0.06);
}

.pc-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(18, 148, 164, 0.9) 0%, rgba(23, 175, 194, 0.9) 100%);
}

.pc-footer .footer-wrapper {
    padding-top: 0.9rem;
    padding-bottom: 0.7rem;
}

.pc-footer p,
.pc-footer .footer-link li,
.pc-footer .footer-link a {
    font-size: 0.86rem;
}

.pc-footer .footer-link a {
    color: #31515a;
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
    padding: 0.2rem 0.38rem;
    transition: color 0.18s ease, background 0.18s ease;
}

.pc-footer .footer-link a:hover,
.pc-footer .footer-link a:focus {
    color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.1);
}

/* Landing footer */
.lan-footer {
    position: relative;
    background:
        radial-gradient(1000px 220px at 20% 0%, rgba(23, 175, 194, 0.17), transparent 60%),
        radial-gradient(800px 240px at 85% 0%, rgba(18, 148, 164, 0.22), transparent 60%),
        linear-gradient(180deg, #0f2e34 0%, #0b252a 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lan-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(18, 148, 164, 0.95) 0%, rgba(23, 175, 194, 0.95) 100%);
}

.lan-footer .container {
    position: relative;
    z-index: 1;
}

.lan-footer h5 {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.lan-footer .support-contain p {
    color: rgba(236, 250, 252, 0.84);
    line-height: 1.65;
}

.lan-footer .footer-link li {
    margin-bottom: 0.42rem;
}

.lan-footer .footer-link li a {
    color: rgba(236, 250, 252, 0.8);
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
    display: inline-block;
}

.lan-footer .footer-link li a:hover,
.lan-footer .footer-link li a:focus {
    color: #ffffff;
    transform: translateX(2px);
}

.lan-footer .sub-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(6, 20, 23, 0.35);
    backdrop-filter: blur(2px);
}

.lan-footer .sub-footer p {
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

@media (max-width: 767.98px) {
    .pc-footer .footer-wrapper {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .pc-footer .footer-wrapper .row {
        row-gap: 6px;
    }

    .pc-footer .footer-wrapper .col-sm-6 {
        text-align: center;
    }

    .pc-footer .footer-link {
        justify-content: center !important;
    }

    .lan-footer .row.g-4 {
        row-gap: 1.2rem !important;
    }

    .lan-footer .support-contain p {
        font-size: 0.9rem;
    }
}

/* ============================================================
   Landing Page Visual Refresh
   ============================================================ */
.landing-page {
    background:
        radial-gradient(1100px 420px at 85% -120px, rgba(18, 148, 164, 0.12), transparent 60%),
        radial-gradient(900px 320px at 0% 20%, rgba(23, 175, 194, 0.08), transparent 58%),
        linear-gradient(180deg, #f7fbfc 0%, #f1f8f9 42%, #f7fbfc 100%);
}

.landing-page .navbar.default {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(16, 82, 93, 0.1);
    box-shadow: 0 8px 24px rgba(7, 34, 39, 0.08);
}

.landing-page .navbar.default .nav-link {
    color: #124751 !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.38rem 0.8rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.landing-page .navbar.default .nav-link:hover,
.landing-page .navbar.default .nav-link.active {
    color: #0f3e47 !important;
    background: rgba(var(--brand-primary-rgb), 0.12);
}

.landing-page header#home {
    padding-top: 2.2rem;
    padding-bottom: 1.2rem;
}

.landing-page header#home h1 {
    color: #0f3d46;
    font-size: clamp(2rem, 2.9vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.landing-page header#home h4 {
    color: #486772 !important;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.65;
    max-width: 62ch;
}

.landing-page header#home .btn.btn-secondary {
    border: none !important;
    border-radius: 12px;
    padding: 0.72rem 1.15rem;
    font-weight: 700;
    background: linear-gradient(95deg, #108b9b 0%, #1eb7c6 100%) !important;
    box-shadow: 0 12px 26px rgba(var(--brand-primary-rgb), 0.28);
}

.landing-page header#home .btn.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 15px 30px rgba(var(--brand-primary-rgb), 0.36);
}

.landing-page header#home .hero-image {
    position: relative;
}

.landing-page header#home .hero-image::after {
    content: "";
    position: absolute;
    inset: auto 6% -6% 8%;
    height: 30px;
    background: radial-gradient(60% 80% at 50% 50%, rgba(10, 61, 69, 0.22) 0%, rgba(10, 61, 69, 0) 100%);
    filter: blur(8px);
    pointer-events: none;
}

.landing-page .tracking-section .tracking-card {
    max-width: 92% !important;
    border-radius: 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16) !important;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 251, 252, 0.95) 100%),
        radial-gradient(500px 120px at 12% -20%, rgba(var(--brand-primary-rgb), 0.11), transparent 70%);
    box-shadow: 0 18px 36px rgba(8, 43, 49, 0.09);
}

.landing-page .tracking-section .tracking-card h5 {
    color: #11414a;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.landing-page .tracking-section .tracking-card .form-control {
    min-height: 44px;
    border-radius: 12px;
    border-color: rgba(var(--brand-primary-rgb), 0.24);
    box-shadow: none;
}

.landing-page .tracking-section .tracking-card .btn {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 700;
}

.landing-page .feature-card {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 24px rgba(8, 36, 41, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-page .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(8, 36, 41, 0.2);
}

.landing-page .bg-body {
    background: transparent !important;
}

.landing-page .pricingpricing .price-card {
    border-radius: 18px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
    box-shadow: 0 14px 28px rgba(7, 35, 40, 0.09);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-page .pricingpricing .price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(7, 35, 40, 0.17);
}

.landing-page .pricingpricing .price-card .card-body {
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfc 100%);
}

.landing-page .pricingpricing .price-card .price-price {
    color: #0f3d46;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.landing-page .pricingpricing .price-card .price-price sup {
    font-weight: 700;
    color: #1a6c79;
}

.landing-page .application-slider .swiper-slide {
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    box-shadow: 0 14px 26px rgba(8, 38, 42, 0.08);
    padding-bottom: 1rem;
}

.landing-page .application-slider .swiper-button-next.avtar,
.landing-page .application-slider .swiper-button-prev.avtar {
    background: #ffffff;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
    box-shadow: 0 10px 20px rgba(8, 38, 42, 0.16);
}

.landing-page .testaments-cards .card {
    border-radius: 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
    box-shadow: 0 12px 24px rgba(8, 33, 37, 0.09);
    transition: transform 0.2s ease;
}

.landing-page .testaments-cards .card:hover {
    transform: translateY(-3px);
}

.landing-page .choose-section {
    border-radius: 18px;
    margin-left: 1rem;
    margin-right: 1rem;
    background:
        radial-gradient(800px 220px at 90% -20%, rgba(24, 184, 200, 0.3), transparent 65%),
        linear-gradient(120deg, #0f2c32 0%, #12424a 58%, #0d3440 100%) !important;
    box-shadow: 0 20px 38px rgba(7, 30, 35, 0.26);
}

.landing-page .frameworks-section .accordion-item {
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18) !important;
    border-radius: 12px !important;
    margin-bottom: 0.72rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(7, 30, 35, 0.06);
}

.landing-page .frameworks-section .accordion-button {
    background: #ffffff;
    font-weight: 700;
}

.landing-page .frameworks-section .accordion-button:not(.collapsed) {
    color: #11444d;
    background: rgba(var(--brand-primary-rgb), 0.09);
}

.landing-page footer.footer {
    position: relative;
    background:
        radial-gradient(900px 280px at 18% -20%, rgba(23, 175, 194, 0.26), transparent 65%),
        linear-gradient(180deg, #0f2f36 0%, #0a262b 100%) !important;
}

.landing-page footer.footer .footer-link li a {
    transition: color 0.2s ease, transform 0.2s ease;
}

.landing-page footer.footer .footer-link li a:hover {
    color: #e9fdff;
    transform: translateX(2px);
}

@media (max-width: 991.98px) {
    .landing-page header#home {
        padding-top: 1.1rem;
    }

    .landing-page .tracking-section .tracking-card {
        max-width: 100% !important;
    }

    .landing-page .choose-section {
        margin-left: 0.35rem;
        margin-right: 0.35rem;
    }
}

@media (max-width: 767.98px) {
    .landing-page .navbar.default {
        background: rgba(255, 255, 255, 0.95) !important;
    }

    .landing-page header#home h1 {
        font-size: 1.75rem;
    }

    .landing-page header#home h4 {
        font-size: 0.98rem;
    }

    .landing-page .tracking-section .tracking-card {
        padding: 1rem !important;
        border-radius: 14px;
    }

    .landing-page .tracking-section .tracking-card .d-flex.gap-2 {
        gap: 0.55rem !important;
    }

    .landing-page .feature-card,
    .landing-page .pricingpricing .price-card,
    .landing-page .testaments-cards .card {
        border-radius: 14px;
    }

    .landing-page .application-slider .swiper-slide {
        border-radius: 14px;
    }

    .landing-page .frameworks-section .accordion-item {
        border-radius: 10px !important;
    }
}

/* ============================================================
   Landing Page Bold Variant (Pass 2)
   ============================================================ */
.landing-page {
    background:
        radial-gradient(1300px 520px at 92% -160px, rgba(9, 90, 101, 0.16), transparent 62%),
        radial-gradient(900px 480px at -10% 8%, rgba(18, 148, 164, 0.12), transparent 64%),
        linear-gradient(180deg, #eef6f7 0%, #f8fcfc 52%, #edf7f8 100%);
}

.landing-page .navbar.default {
    background: rgba(247, 253, 254, 0.86) !important;
    border-bottom: 1px solid rgba(10, 74, 83, 0.15);
    box-shadow: 0 10px 26px rgba(6, 34, 39, 0.1);
}

.landing-page .navbar.default .nav-link {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.landing-page .navbar.default .btn.btn-secondary {
    border: none !important;
    border-radius: 999px;
    padding-left: 1rem;
    padding-right: 1rem;
    background: linear-gradient(100deg, #0d8392 0%, #1db4c4 100%) !important;
    box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb), 0.28);
}

.landing-page header#home {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 2.25rem;
}

.landing-page header#home::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.88) 8%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 255, 255, 0) 90%);
    pointer-events: none;
}

.landing-page header#home .row {
    position: relative;
    z-index: 1;
}

.landing-page header#home h1 {
    color: #0a3840;
    text-wrap: balance;
}

.landing-page header#home h4 {
    max-width: 56ch;
    color: #3f606a !important;
}

.landing-page header#home .btn.btn-secondary {
    border-radius: 999px;
    padding: 0.78rem 1.35rem;
    letter-spacing: 0.01em;
}

.landing-page header#home .avtar.avtar-l.bg-light-secondary {
    border: 1px dashed rgba(var(--brand-primary-rgb), 0.35);
    background: rgba(255, 255, 255, 0.85) !important;
}

.landing-page .tracking-section .tracking-card {
    border-radius: 20px;
    border: 1px solid rgba(6, 83, 94, 0.18) !important;
    background:
        radial-gradient(700px 160px at 5% -40%, rgba(var(--brand-primary-rgb), 0.14), transparent 70%),
        linear-gradient(170deg, #ffffff 0%, #f4fbfc 100%);
    box-shadow: 0 22px 40px rgba(6, 40, 45, 0.12);
}

.landing-page .tracking-section .tracking-card .btn.btn-dark {
    background: linear-gradient(95deg, #0d8291 0%, #1bb3c2 100%) !important;
    border: none;
    color: #ffffff;
}

.landing-page .tracking-section .tracking-card .btn.btn-outline-secondary {
    border-color: rgba(8, 84, 95, 0.28);
    color: #0f5b66;
    background: rgba(255, 255, 255, 0.92);
}

.landing-page section .title .h1 {
    color: #0f3c45;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.landing-page section .title .text-lg {
    color: #47656f;
}

.landing-page .feature-card {
    border: 1px solid rgba(12, 106, 119, 0.24);
    box-shadow: 0 16px 28px rgba(5, 33, 37, 0.14);
}

.landing-page .feature-card .h1,
.landing-page .feature-card .h5 {
    color: #083b43;
}

.landing-page .pricingpricing .price-card {
    border: 1px solid rgba(10, 94, 106, 0.22);
}

.landing-page .pricingpricing .price-card .card-body {
    background:
        radial-gradient(600px 120px at 70% -40%, rgba(var(--brand-primary-rgb), 0.12), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f2fbfc 100%);
}

.landing-page .pricingpricing .price-card .btn {
    border-radius: 999px;
    border-width: 1px;
    font-weight: 700;
}

.landing-page .pricingpricing .price-card .btn:hover {
    transform: translateY(-1px);
}

.landing-page .application-slider .swiper-slide {
    border: 1px solid rgba(11, 97, 109, 0.24);
    box-shadow: 0 16px 28px rgba(7, 36, 40, 0.12);
}

.landing-page .application-slider .swiper-slide h3 {
    color: #0f3d46;
    margin-top: 0.85rem;
}

.landing-page .testaments-cards .card {
    border: 1px solid rgba(10, 90, 101, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%);
}

.landing-page .testaments-cards .card p {
    color: #3d5e68;
}

.landing-page .choose-section {
    border: 1px solid rgba(146, 235, 246, 0.18);
}

.landing-page .frameworks-section .accordion-button {
    font-size: 0.97rem;
}

.landing-page .frameworks-section .accordion-body {
    color: #41626b !important;
}

.landing-page footer.footer {
    background:
        radial-gradient(1100px 280px at 85% -20%, rgba(26, 183, 199, 0.28), transparent 64%),
        linear-gradient(180deg, #0e3036 0%, #09252a 100%) !important;
}

.landing-page footer.footer h4,
.landing-page footer.footer h5 {
    letter-spacing: 0.01em;
}

@media (max-width: 991.98px) {
    .landing-page header#home {
        padding-top: 1.4rem;
        padding-bottom: 1.4rem;
    }

    .landing-page header#home::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    }
}

@media (max-width: 767.98px) {
    .landing-page .navbar.default .btn.btn-secondary {
        border-radius: 12px;
    }

    .landing-page .tracking-section .tracking-card {
        border-radius: 14px;
    }

    .landing-page .tracking-section .tracking-card .btn.btn-dark,
    .landing-page .tracking-section .tracking-card .btn.btn-outline-secondary {
        border-radius: 10px;
    }
}